<template>
	<view class="create" v-if="info">
		<view class="card">
			<view class="top">
				<image :src="info.pic"></image>
				<view class="card_text">
					<view class="name">
						<text>{{info.filmName}}</text>
						<!-- <view>共{{info.seat_arr.length}}张</view> -->
					</view>
					<view class="text">{{info.showTime}} ({{type}})</view>
					<view class="text">{{info.hallName}} 
						<text v-for="(item,index) in info.seat_arr" :key="index">{{item.ColumnNum}}排{{item.RowNum}}列</text>
					</view>
					<view class="text">{{info.scenicName}}</view>
					<view class="text">{{cinemaAddress}}</view>
				</view>
			</view>
			<view class="bottom">
				<view>
					<uni-icons type="clear" color="#DE2500" size="20"></uni-icons>
					<text>不支持退票</text>
				</view>
				<view style="margin-left: 30rpx;">
					<uni-icons type="clear" color="#DE2500" size="20"></uni-icons>
					<text>不支持改签</text>
				</view>
			</view>
		</view>
		
		<view class="phone">
			<text>手机号</text>
			<view>
				<input v-model="info.mobile" type="number"></input>
				<uni-icons type="forward" size="18" color="#7F7F7F"></uni-icons>
			</view>
		</view>
		
		<view class="editor">
			<view class="title">购票须知</view>
			<view class="ed_text" v-html="content"></view>
		</view>
		
		<view class="btn">
			<button @click="getDetail">立即支付 {{Number(info.price).toFixed(2)}}元</button>
		</view>
		
		<u-modal v-model="show" @confirm="accept"
		@cancel="cancel"
		ref="uModal" title="订单确认" 
		confirm-text="接受"
		cancel-text="不接受"
		content="当选择的座位已售时，是否接受换座出票"
		show-cancel-button
		:title-style="{
			'background':'#EAF2FE',
			color:'#2E7EFA',
			'font-weight':600,
			padding:'30rpx 0'
		}"
		:confirm-style="{
			'background':'#EAF2FE',
		}"
		></u-modal>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content :"",

				show:false,

				info:{
					seat_arr:[]
				},
				type:'',
				cinemaAddress:'',
				
				film_info:{},
			}
		},
		methods: {
			getDetail(e){
				let data = this.film_info
				data.mobile = this.info.mobile
				if(!this.info.mobile || !this.$util.phoneVerify(this.info.mobile)){return this.$util.msg('请输入正确的手机号')}
				data.seat_arr = JSON.stringify(data.seat_arr)
				this.request.httpTokenRequest({
					url: "order/createMovieOrder",
					method: "post"
				},data).then(res => {
					if (res.code == 0) {
						uni.navigateTo({
							url:'/otherpages/pay/pay?order_id=' + res.data.order_id + '&type=1'
						})
					}else {
						this.$util.modal(res.msg)
					}
				}, error => {})
			},
			accept(){
				this.info.acceptChangeSeat = true
			},
			cancel(){
				this.info.acceptChangeSeat = false
			},
			
			
			getContent(){
				this.request.httpTokenRequest({
					url: "index/policy",
					method: "get"
				},{
					type:'movie_notice'
				}).then(res => {
					if (res.code == 0) {
						this.content = res.data.content
					}else {
						this.$util.msg(res.msg)
					}
				}, error => {})
			},
		},
		onLoad(option) {
			this.info = JSON.parse(option.info)
			this.film_info = JSON.parse(option.info)
			// this.show = true
			this.info.acceptChangeSeat = true
			this.type = option.type
			this.cinemaAddress = option.cinemaAddress
			this.getContent()
		}
	}
</script>

<style lang="scss" scoped>
	.create {
		min-height: 100vh;
		background: #F5F7F8;
		padding: 20rpx 30rpx 130rpx;
	}
	.card {
		background: url(https://qiniu-cdn.maeiyun.com/imgs/film/createorder.png) no-repeat 0 0;
		background-size: 100%;
		padding: 30rpx 31rpx 31rpx 30rpx;
		height: 443rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.top {
			height: 318rpx;
			display: flex;
			border-bottom: 1rpx dashed #D0CFCF;
			image {
				width: 165rpx;
				height: 220rpx;
				margin-right: 30rpx;
				flex-shrink:0;
			}
			.card_text {
				.name {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex: 1;
					text {
						font-size: 30rpx;
						font-weight: 600;
						color: #0F0807;
						line-height: 42rpx;
					}
					view {
						font-size: 26rpx;
						color: #8D8D8D;
						line-height: 37rpx;
					}
				}
				.text {
					margin-top: 12rpx;
					font-size: 26rpx;
					color: #8D8D8D;
					line-height: 37rpx;
					white-space: pre-wrap;
				}
			}
		}
		.bottom {
			display: flex;
			align-items: flex-end;
			view {
				display: flex;
				align-items: center;
			}
			flex: 1;
		}
	}
	
	.phone {
		height: 88rpx;
		padding: 0 30rpx 0 33rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 0;
		view {
			font-size: 30rpx;
			color: #0F0807;
			line-height: 42rpx;
			display: flex;
			align-items: center;
		}
		text {
			font-size: 26rpx;
			font-weight: 600;
			color: #333333;
			line-height: 37rpx;
		}
	}
	
	.editor {
		padding: 26rpx 27rpx 40rpx 33rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.title {
			margin-bottom: 25rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #333333;
			line-height: 42rpx;
		}
		.ed_text {
			color: #868686;
			// letter-spacing: 4rpx;
			font-size: 24rpx;
			/deep/ ol {
				padding-left: 0;
				li {
					padding-bottom: 20rpx;
					list-style: none;
					font-size: 26rpx;
					line-height: 40rpx;
				}
			}
		}
	}
	
	.btn {
		width: 100vw;
		height: 120rpx;
		background: #FEFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		button {
			width: 690rpx;
			height: 88rpx;
			background: #EF5233;
			border-radius: 44rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 88rpx;
		}
	}
	
</style>
